<template>
  <el-dialog class="public-dialog" title="店铺销售数据" width="1000" :modelValue="modelValue" @close="handleClose" draggable align-center append-to-body>
    <div>
      <div class="flex">
        <div class="flex-1"></div>
        <el-radio-group v-model="currency" @change="query()">
          <el-radio value="USD">USD</el-radio>
          <el-radio value="CNY">CNY</el-radio>
        </el-radio-group>
      </div>
      <vxe-grid v-bind="gridOptions" ref="tableRef" />
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button type="primary" @click="handleClose"> 关闭 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="jsx">
import XForm from "@/components/XForm/index.vue"
import req from "@/views/user/list/add/api/index"

import { nextTick } from "vue"
const props = defineProps({})
const emit = defineEmits(["refresh"])
const modelValue = ref(false)
const tableRef = ref()

const gridOptions = reactive({
  border: true,
  scrollY: { enabled: true },
  height: "660px",
  columns: [
    { field: "platform", title: "平台", width: "120" },
    { field: "site", title: "站点", width: "100" },
    {
      field: "shop",
      title: "店铺",
      slots: {
        default: ({ row }) => <VText value={row.shop} line={1} />,
      },
    },
    {
      field: "sale_num",
      title: "订单数量",
      width: "100",
      sortable: true,
      slots: {
        default: ({ row }) => <span>{Number(row.sale_num)?.toLocaleString()}</span>,
      },
    },
    {
      field: "sale_amount",
      width: "150",
      sortable: true,
      slots: {
        header: () => <span>订单销售额({currency.value})</span>,
        default: ({ row }) => <span>{Number(row.sale_amount)?.toLocaleString()}</span>,
      },
    },
    {
      field: "profit",
      width: "140",
      sortable: true,
      slots: {
        header: () => <span>订单利润({currency.value})</span>,
        default: ({ row }) => <span>{Number(row.profit)?.toLocaleString()}</span>,
      },
    },
    {
      title: "订单利润率",
      field: "profit_rate",
      width: "110",
      sortable: true,
      slots: {
        default: ({ row }) => <span>{row.profit_rate}%</span>,
      },
    },
  ],

  showFooter: true,
  footerMethod({ columns, data }) {
    return [
      columns.map((column, columnIndex) => {
        if ("sale_num,sale_amount,profit".includes(column.field)) {
          return Number(sumNum(data, column.field))?.toLocaleString()
        } else if (column.field == "profit_rate") {
          return ((sumNum(data, "profit") / sumNum(data, "sale_amount")) * 100).toFixed(2) + "%"
        } else if (column.field == "platform") {
          return "合计"
        }
      }),
    ]
  },
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: async () => {
        let { data } = await req.orderShopSaleList({ query: formData.value, currency: currency.value })
        return data || []
      },
    },
  },
})
const formData = ref({})
const currency = ref("USD")
const open = (params = {}) => {
  modelValue.value = true
  formData.value = params
  query()
}

const handleClose = () => {
  tableRef.value.reloadData([])
  tableRef.value.clearAll()
  formData.value = {}
  setTimeout(() => {
    modelValue.value = false
  }, 10)
}

const query = () => {
  nextTick(() => tableRef.value.commitProxy("query"))
}

// 合计
const sumNum = (list, field) => {
  let count = 0
  list.forEach((item) => {
    count += Number(item[field] || 0)
  })
  count = count.toFixed(2)
  return count
}

defineExpose({ open })
</script>
